<template>
	<view style="height: 100%;display: flex;flex-direction: column;">
		<view style="flex: 1;">
			<z-paging ref="paging" :fixed="false" v-model="data" @query="query" :default-page-no="1"
				:default-page-size="10" style="height: 100%;box-sizing: border-box;padding-top: 10rpx;" scroll-y="true">
				<view v-for="item in data" :key="item.id" class="contentBox viewWidth" @click="jump(item.id)">
					<view class="flex">
						<view style="flex: 1;">
							<u-text :text='`订单编号：${item.order_id}`' />
						</view>
						<view class="color_ED7353">
							{{item.status_text}}
						</view>
					</view>
					<view class="flex mt20" style="align-items: flex-start;">
						<u-icon name='rmb-circle' size='100rpx' color='#bbb'/>
						<view style="flex: 1;">
							充值
						</view>
						<view>
							<u-text :text='item.charge' mode="price" />
						</view>
					</view>
					<view class="flex mt20" style="justify-content: flex-end;" >
						共1件商品,合计<view>
							<u-text size='24rpx' :text='item.charge' mode="price" />
						</view>
					</view>
					<view class="flex mt20">
						<view style="flex: 1;color: #bbb;">
							{{item.created_at | changeTime}}
						</view>
						<view v-if="item.status_text=='未支付'||item.status_text=='支付中'" class="but baColor_ddd "
							@click.stop="cancel(item.id)">
							取消订单
						</view>
						<view style="margin-left: 20rpx;" v-if="item.status_text=='未支付'||item.status_text=='支付中'" class="but baColor_ED7353"
							@click.stop="Payment(item)">
							付款
						</view>
					</view>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled: false,
				openid: uni.getStorageSync('openid'),
				data: [],
				loading: true,
			}
		},
		methods: {
			cancel(id) {
				this.$api.Order.Del(id)
				this.data = this.data.map(item => {
					if (item.id == id) {
						return {
							...item,
							status_text: '已取消'
						}
					}
					return item
				})
			},
			jump(id) {
				this.$utils.navigateTo({
					url: '/order/detail?id=' + id
				})
			},
			Payment(data) {
				uni.showLoading({
					title: "查询订单中..."
				})
				if (this.disabled) return
				this.disabled = true
				this.$api.Recharge.Payment({
					order_id: data.order_id,
					openid: this.openid
				}).then(res => {
					uni.hideLoading()
					this.showCode(res.data, data.goods[0].goods_charge)
				}).catch(err => {
					console.log(err)
					uni.hideLoading()
					uni.$u.toast(err.data.message)
					this.disabled = false
				})
			},
			showCode(data, charge) {
				uni.requestPayment({
					provider: "wxpay",
					appid: data.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
					nonceStr: data.nonceStr, // 随机字符串
					package: data.package, // 固定值
					prepayId: data.package.substring(10), // 统一下单订单号 
					timeStamp: data.timeStamp, // 时间戳（单位：秒）
					signType: data.signType, // 签名，这里用的 MD5/RSA 签名
					paySign: data.paySign,
					success: (res) => {
						uni.reLaunch({
							url: '/My/success?charge=' + charge
						})

					},
					fail: (e) => {
						this.disabled = false
						uni.$u.toast('取消付款')
					}
				})
			},
			query(pageNo, pageSize) {
				let sendData = {
					page: pageNo,
					size: pageSize,
				}

				uni.showLoading({
					title: '加载中...'
				})
				this.$api.My.OrderRecharge(sendData).then(res => {
					uni.hideLoading();
					this.$refs.paging.complete(res.data.data);
					this.loading = false

				}).catch(err => uni.hideLoading())
			},
		}
	}
</script>

<style scoped lang="scss">
	.contentBox {
		border-radius: 8rpx;
		background-color: #fff;
		padding: 20rpx;
		margin-top: 20rpx;
		box-sizing: border-box;

		.flex {
			display: flex;
			align-items: center;
		}
	}

	.but {
		border-radius: 8rpx;
		padding: 10rpx 20rpx;
	}

	.color_ED7353 {
		color: #ED7353;
	}

	.baColor_ED7353 {
		color: #fff;
		background-color: #ED7353;
	}

	.baColor_ddd {
		color: #ED7353;
		background-color: #eee;
	}




	.mr10 {
		margin-right: 10rpx;
	}
</style>